<template>
  <view style="background-color: #ffffff">
    <view style="margin: 0 24rpx">
      <u-search
        placeholder="搜索活动课程"
        v-model="keyword"
        :clearabled="true"
        :showAction="false"
      ></u-search>
    </view>
    <DaDropdownVue2
      :dropdownMenu="dropdownMenuList"
      themeColor="#007aff"
      textColor="#333333"
      :duration="300"
      @confirm="handleConfirm"
      @close="handleClose"
      @open="handleOpen"
    >
      <template v-slot:slot1="{ item, index }">
        <view style="padding: 40px">自定义插槽内容</view>
      </template>
    </DaDropdownVue2>
    <view class="card-list">
      <view class="card" v-for="(item, index) in activityData" :key="index">
        <view
          class="status-label"
          :class="{
            'status-full': item.signup_count >= item.max_participants,
          }"
        >
          {{ item.signup_count >= item.max_participants ? "满员" : "报名中" }}
        </view>

        <view class="cover-image">
          <u-image
            :src="item.image"
            error-icon="error-circle"
            mode="aspectFill"
          ></u-image>
        </view>

        
        <view class="card-content">
          <view class="title-section">
            <view class="left">
              <view class="title">{{ item.name }}</view>
              <view class="type-tag">{{ item.type_text }}</view>
            </view>
            <view class="distance">
              <image src="/txjmk/static/images/map.png" mode="widthFix"></image>
              {{ item.distance }}km
            </view>
          </view>

          <view class="teacher-info">
            <image
              @tap.stop="navigateTeacher(item.coach)"
              class="avatar"
              :src="getTeacherAvatar(item.coach)"
              mode="aspectFill"
            ></image>
            <view class="details">
              <view class="name">{{
                (item.coach && item.coach.name) || "待定"
              }}</view>
              <view class="info-item">
                <u-icon size="22" name="calendar"></u-icon>
                <text>{{ item.time_range || "时间待定" }}</text>
              </view>
              <view class="info-item">
                <u-icon size="22" name="map-fill"></u-icon>
                <text>{{ item.address || "地址待定" }}</text>
              </view>
              <view class="info-item">
                <u-icon size="22" name="account"></u-icon>
                <text
                  >适龄:
                  {{
                    item.min_age && item.max_age
                      ? `${item.min_age}~${item.max_age}岁`
                      : "年龄不限"
                  }}</text
                >
              </view>
            </view>
          </view>

          <view class="stats-section">
            <view class="observers">
              <view class="number">围观人数：{{ item.watch_count }}人</view>
              <view class="avatars">
                <image
                  v-for="(watchUser, watchIndex) in item.watchUser"
                  :key="watchIndex"
                  :src="getUserAvatar(watchUser.user)"
                  mode="aspectFill"
                ></image>
              </view>
            </view>
            <view class="enrollments">
              <view class="number">
                报名人数：{{ item.signup_count }}/{{ item.max_participants }}人
              </view>
              <view class="avatars">
                <image
                  v-for="(joinUser, joinIndex) in item.joinUser"
                  :key="joinIndex"
                  :src="getUserAvatar(joinUser.user)"
                  mode="aspectFill"
                ></image>
              </view>
            </view>
          </view>

          <view class="action-section">
            <view class="price-info">
              <text class="label">费用：￥</text>
              <text class="value">{{ item.price }}</text>
              <text class="label">/人</text>
            </view>
            <view class="buttons" style="display: flex">
              <view class="btn detail" @click="navigate(item)"> 编辑 </view>
              <view class="btn enroll" @click="navigateRegister(item)">
                发布
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import DaDropdownVue2 from "@/components/da-dropdown-vue2/index.vue";
import { apiMyActivity } from "@/api/activity";
export default {
  components: {
    DaDropdownVue2,
  },
  props: {
    content: {
      type: [Object, Array],
    },
    styles: {
      type: [Object, Array],
    },
  },
  data() {
    return {
      title: "hello",
      keyword: "",
      activityData: "",
      dropdownMenuList: [
        {
          title: "筛选",
          type: "filter",
          prop: "god4",
          // 默认选中单选2、多选2、3、滑动30
          // value: { ft1: '2', ft2: ['2', '3'], ft3: 30 },
          options: [
            {
              title: "班级类型",
              type: "checkbox",
              prop: "ft2",
              options: [
                {
                  label: "体验班",
                  value: "1",
                },
                {
                  label: "标准班",
                  value: "2",
                },
                {
                  label: "公益班",
                  value: "3",
                },
                {
                  label: "定制周期班",
                  value: "4",
                },
              ],
            },
            {
              title: "课程类型",
              type: "radio",
              prop: "ft1",
              options: [
                {
                  label: "健身课",
                  value: "1",
                },
                {
                  label: "拳击课",
                  value: "2",
                },
                {
                  label: "公益课",
                  value: "3",
                },
              ],
            },
            {
              title: "时间",
              type: "radio",
              prop: "ft1",
              options: [
                {
                  label: "近三天",
                  value: "1",
                },
                {
                  label: "一周",
                  value: "2",
                },
                {
                  label: "一月",
                  value: "3",
                },
              ],
            },
          ],
        },
        {
          title: "排序方式",
          type: "cell",
          prop: "god3",
          // value: 'asc', // 默认升序
          options: [
            {
              label: "按热门程度排序1",
              value: "filterValue1",
            },
            {
              label: "按热门程度排序2",
              value: "filterValue2",
            },
            {
              label: "按最新上架",
              value: "filterValue3",
            },
          ],
        },
        {
          title: "搜索",
          type: "search",
          prop: "god0",
        },
      ],
    };
  },
  methods: {
    getTeacherAvatar(teacher) {
      if (teacher && teacher.avatar) {
        return teacher.avatar;
      }
      return "/static/images/icon_portrait.png";
    },
    navigateTeacher(item) {
      this.$Router.push({
        path: `/pages/teacher_manage/index`,
        query: {
          id: item.id,
        },
      });
    },
    getUserAvatar(user) {
      if (user && user.avatar) {
        return user.avatar;
      }
      return "/static/images/icon_portrait.png";
    },
    navigate(item) {
      console.log("编辑按钮点击，活动ID:", item.id);
      this.$Router.push({
        path: "/bundle/launchevent/launchevent",
        query: {
          id: item.id,
          step: 0,
        },
      });
    },
    navigateRegister(item) {
      console.log("发布按钮点击，活动ID:", item.id);
      uni.navigateTo({
        url: `/bundle/launchevent/launchevent?id=${item.id}&step=2`,
      });
    },
    getactivityLists() {
      apiMyActivity().then((res) => {
        this.activityData = res.data;
      });
    },
    handleConfirm(v) {
      console.log("handleConfirm ==>", v);
    },
    handleClose(v) {
      console.log("handleClose ==>", v);
    },
    handleOpen(v) {
      console.log("handleOpen ==>", v);
    },
  },
  onLoad() {
    this.getactivityLists();
  },
};
</script>

<style lang="scss" scoped>
.card-list {
  padding: 24rpx;
}

.card {
  position: relative;
  margin-bottom: 32rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;

  &:active {
    transform: translateY(2rpx);
  }

  .status-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 112rpx;
    height: 46rpx;
    background: #0dc160;
    border-radius: 20rpx 0 20rpx 0;
    color: #fff;
    font-size: 24rpx;
    line-height: 46rpx;
    text-align: center;
    z-index: 1;

    &.status-full {
      background: #999;
    }
  }

  .cover-image {
    width: 100%;
    height: 312rpx;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60rpx;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
    }

    ::v-deep .u-image {
      width: 100%;
      height: 100% !important;
    }
  }
}

.card-content {
  padding: 32rpx 24rpx;

  .title-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32rpx;

    .left {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 16rpx;
      min-width: 0;

      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: #2c3e50;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
      }

      .type-tag {
        padding: 4rpx 16rpx;
        background: #e8f5e9;
        border-radius: 8rpx;
        font-size: 24rpx;
        color: #0dc160;
        font-weight: 500;
        flex-shrink: 0;
      }
    }

    .distance {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 24rpx;
      background: #f5f5f5;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      flex-shrink: 0;
      margin-left: 16rpx;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
        flex-shrink: 0;
      }
    }
  }

  .teacher-info {
    display: flex;
    padding: 24rpx;
    margin: 0 -24rpx;
    background: #f9f9f9;

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 24rpx;
      border: 4rpx solid #fff;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
    }

    .details {
      flex: 1;
      min-width: 0;

      .name {
        font-size: 30rpx;
        font-weight: 500;
        color: #2c3e50;
        margin-bottom: 16rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .info-item {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #666;
        margin-top: 12rpx;
        line-height: 1.4;

        ::v-deep .u-icon {
          margin-right: 10rpx;
          color: #0dc160;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          height: 34rpx;
        }

        text {
          flex: 1;
          min-width: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          word-break: break-all;
          padding-top: 2rpx;
        }
      }
    }
  }

  .stats-section {
    margin: 32rpx 0;

    .observers,
    .enrollments {
      display: flex;
      align-items: center;
      height: 64rpx;
      padding: 0 24rpx;
      border-radius: 12rpx;
      margin-bottom: 16rpx;

      .number {
        flex: 1;
        font-size: 26rpx;
      }

      .avatars {
        display: flex;
        align-items: center;
        gap: 8rpx;

        image {
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
          border: 2rpx solid #fff;
          box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
        }
      }
    }

    .observers {
      background: #f5f5f5;
      color: #666;
    }

    .enrollments {
      background: linear-gradient(to right, #e8f5e9, #c8e6c9);
      color: #0dc160;
    }
  }

  .action-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32rpx;
    padding-top: 32rpx;
    border-top: 2rpx solid #f5f5f5;

    .price-info {
      .label {
        color: #999;
        font-size: 24rpx;
      }

      .value {
        color: #0dc160;
        font-size: 50rpx;
        font-weight: bold;
      }
    }

    .buttons {
      display: flex;
      gap: 24rpx;

      .btn {
        width: 160rpx;
        height: 80rpx;
        border-radius: 44rpx;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 80rpx;
        text-align: center;
        transition: all 0.3s;

        &:active {
          transform: scale(0.98);
        }
      }

      .detail {
        background: #e8f5e9;
        border: none;
        color: #0dc160;

        &:active {
          background: darken(#e8f5e9, 5%);
        }
      }

      .enroll {
        background: #0dc160;
        color: #fff;
        box-shadow: 0 4rpx 12rpx rgba(13, 193, 96, 0.3);

        &:active {
          background: darken(#0dc160, 5%);
          box-shadow: 0 2rpx 6rpx rgba(13, 193, 96, 0.2);
        }
      }
    }
  }
}
</style>
